<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_案例练习-购物车加加减减</title>
    </head>
    <body>
        <button id="sub">-</button>
        <span id="num">1</span>
        <button id="plus">+</button>


        <script>
            // innerHTML 可以设置标签中间的内容  也可以获取标签中间的内容


            // 加
            var plus = document.getElementById('plus');
            var span_num = document.getElementById('num');
            plus.onclick = function(){
                // 获取标签中间的内容
                // var n = span_num.innerHTML;
                // 将数值加一
                // n++;
                // 将加一之后的结果 设置给span标签的内容
                // span_num.innerHTML = n;
                span_num.innerHTML++;
            }


            // 减
            var sub = document.getElementById('sub');

            sub.onclick = function(){
                var n = span_num.innerHTML;
                if(n > 1) {
                    n--;
                    span_num.innerHTML = n;
                }
            }

        </script>
    </body>
</html>